<template>
    <div class="common-page page-stats-order-government" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
            <div class="title">
                <div class="text">{{ $options.title }}</div>
                <el-date-picker type="date" v-model="startTime" size="small" style="margin-right: 12px; width: 200px" format="起始yyyy年M月d日" value-format="timestamp" placeholder="起始日期" :readonly="loading" @change="search()"></el-date-picker>
                <el-date-picker type="date" v-model="endTime" size="small" style="margin-right: 12px; width: 200px" format="截止yyyy年M月d日" value-format="timestamp" placeholder="截止日期" :readonly="loading" @change="search()"></el-date-picker>
                <el-button
                    style="width: 100px;  float: right"
                    type="primary"
                    size="small"
                    @click="exportExcel"
                >导出Excel</el-button
                >
            </div>
        </div>
        <div class="common-page__body page-stats-order-government__body">

            <table id="exportTable-government" style="width: 60vw">
                <thead>
                <tr>
                    <th >排名</th>
                    <th >自治区级部门</th>
                    <th >事项总数</th>
                    <th >办结数</th>
                    <th >办结率</th>
                    <th >办成数</th>
                    <th >办成率</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(government, index) in governmentList" :key="index">
                    <td>{{ index + 1 }}</td>

                    <td>{{government.name }}</td>
                    <td>{{ government.stats.ordersTotal }}</td>
                    <td>{{ government.stats.ordersFinishedTotal }}</td>
                    <td>{{ government.stats.ordersFinishedPercent }}</td>
                    <td>{{ government.stats.countCom }}</td>
                    <td>{{ government.stats.countComPercent }}</td>


                </tr>
                </tbody>
            </table>


<!--            <div class="row">-->
<!--                <div class="col col&#45;&#45;2em">排名</div>-->
<!--                <div class="col">自治区级部门</div>-->
<!--                <div class="col col&#45;&#45;4em">事项总数</div>-->
<!--                <div class="col col&#45;&#45;4em">办结数</div>-->
<!--                <div class="col col&#45;&#45;4em">办结率</div>-->
<!--                <div class="col col&#45;&#45;4em">办成数</div>-->
<!--                <div class="col col&#45;&#45;4em">办成率</div>-->
<!--            </div>-->
<!--            <div class="row" v-for="(government, index) in governmentList" :key="government.id">-->
<!--                <div class="col col&#45;&#45;2em">-->
<!--                    <span v-if="government.stats.ordersTotal > 0">{{ index + 1 }}</span>-->
<!--                    <span v-else>-</span>-->
<!--                </div>-->
<!--                <div class="col">{{ government.name }}</div>-->
<!--                <div class="col col&#45;&#45;4em">{{ government.stats.ordersTotal }}</div>-->
<!--                <div class="col col&#45;&#45;4em">{{ government.stats.ordersFinishedTotal }}</div>-->
<!--                <div class="col col&#45;&#45;4em">{{ government.stats.ordersFinishedPercent }}%</div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    import XLSX from "xlsx";
    export default {
        name: "page-stats-order-government",
        title: "办结率排名-自治区级职能部门",
        nodes: ["/menu/stats"],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            startTime: null,
            endTime: null,
            governmentList: [],
        }),
        methods: {
            search(clean) {
                if (this.loading) return;
                if (clean) this.governmentList = [];
                let startTime = this.startTime;
                let endTime = this.endTime;
                this.loading = true;
                this.plugins.user.getStatsOrderGovernment({ startTime, endTime }).then((res) => {
                    console.log(res);
                    this.loading = false;
                    if (res.code === 0) {
                        let list = res.data.map((data) => ({
                            id: string(data.deptId),
                            name: string(data.deptName),
                            cityId: string(data.cityId),
                            countyId: string(data.areaId),
                            stats: {
                                ordersTotal: int(data.countAll),
                                ordersFinishedTotal: int(data.countStatus_5),
                                ordersFinishedPercent: int(int(data.countStatus_5) / int(data.countAll), 4) / 100,
                                countCom: int(data.countCom),
                                countComPercent: int(int(data.countCom) / int(data.countAll), 4) / 100,
                            },
                        }));
                        this.governmentList = list.filter((data) => {
                            return data
                        }).sort((a, b) => {
                            let a1 = a.stats.ordersFinishedPercent;
                            let a2 = a.stats.ordersFinishedTotal;
                            let a3 = a.stats.ordersTotal;
                            let b1 = b.stats.ordersFinishedPercent;
                            let b2 = b.stats.ordersFinishedTotal;
                            let b3 = b.stats.ordersTotal;
                            return a1 === b1 ? a2 === b2 ? b3 - a3 : b2 - a2 : b1 - a1;
                        });
                    } else {
                        this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.loading = true;
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.search();
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
                    }
                });
            },
            exportExcel() {
                this.plugins.modal.toast("开始下载！", "success");
                const table = document.getElementById("exportTable-government");
                const ws = XLSX.utils.table_to_sheet(table);

                // 设置单元格样式
                const range = XLSX.utils.decode_range(ws["!ref"]);
                for (let R = range.s.r; R <= range.e.r; ++R) {
                    for (let C = range.s.c; C <= range.e.c; ++C) {
                        const cellRef = XLSX.utils.encode_cell({ r: R, c: C });
                        const cell = ws[cellRef];
                        if (!cell) {
                            continue;
                        }
                        cell.s = {
                            alignment: {
                                horizontal: "right",
                                vertical: "center",
                            },
                        };
                    }
                }
                // 自适应内容

                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
                XLSX.writeFile(wb, "办结率排名-自治区级职能部门.xlsx");
            },
        },
    };
</script>

<style lang="scss">
    .page-stats-order-government {
        overflow: hidden;
    }

    .page-stats-order-government__body {
        display: flex;
        flex-direction: column;

        & > .row {
            flex: 0 0 auto;
            display: flex;
            width: 640px;

            & > .col {
                flex: 1 1 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 2px 2px 0;
                padding: 8px 9px;
                color: #333;
                font-size: 14px;
                line-height: 16px;
                text-align: center;
                background-color: #f6f6f6;

                & > .key {
                    color: #1677ff;
                }
            }

            & > .col--click {
                cursor: pointer;
            }

            & > .col--2em {
                flex: 0 0 auto;
                width: 2em;
            }

            & > .col--3em {
                flex: 0 0 auto;
                width: 3em;
            }

            & > .col--4em {
                flex: 0 0 auto;
                width: 4em;
            }

            &:first-child {
                & > .col {
                    font-weight: bold;
                }
            }
        }
    }


    .page-stats-order-government table {
        border-collapse: collapse;
        border: 2px solid #ffffff;
    }
    .page-stats-order-government th,
    .page-stats-order-government td {
        border: 2px solid #ffffff;
        padding: 8px;
        text-align: center;
    }
    .page-stats-order-government th,
    .page-stats-order-government td {
        background-color: #f6f6f6;
    }
    .page-stats-order-government td {
        font-size: 12px;
    }
</style>
